<template>
    <el-row :gutter="20" justify="center" class="margin-top">
        <el-col :span="10">
            <img src="./img/damai.png" width="600" height="350" />
        </el-col>
        <el-col :span="6">
            <el-tabs type="border-card">
                <el-tab-pane label="账户登录">
                    <el-alert :title="loginErr" v-if="loginErr" type="error"></el-alert>
                    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width=""
                        class="demo-ruleForm padding">
                        <el-form-item  prop="phone">
                            <el-input v-model="ruleForm.phone" type="text" autocomplete="off" >
                                <template #prepend>
                                    <el-icon>
                                        <User />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item  prop="password">
                            <el-input v-model="ruleForm.password" type="password" autocomplete="off" >
                                <template #prepend>
                                    <el-icon>
                                        <Lock />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-button type="primary" size="large" class="zhuce" @click="submitInfo">立即登录</el-button>

                    </el-form>
                    <el-row :gutter="20" justify="end">
                        <el-col :span="6">
                            <router-link to="/enroll" class="submit">立即注册</router-link>
                        </el-col>
                    </el-row>
                </el-tab-pane>


            </el-tabs>
        </el-col>
    </el-row>

</template>
<script setup>
import { reactive, ref } from 'vue';
import {useLoginStore} from "../../store/useLoginStore"
import {useRouter,useRoute} from "vue-router"

let router = useRouter();
let route = useRoute();

let loginErr = ref(null);
let loginStore = useLoginStore();

let ruleFormRef = ref(null)
let ruleForm = reactive({
    phone: "",
    password: ""
})
let rules = reactive({
    phone:[
         { required: 'true', message: '账户不能为空', trigger: 'blur' }
    ],
    password:[
        { required: 'true', message: '密码不能为空', trigger: 'blur' }
    ]
})

async function submitInfo(){
    let data=await loginStore.login(ruleForm.phone,ruleForm.password);
    if(data.errorCode=='0000'){
        console.log(route.query.toFrom);
        router.push(route.query.toFrom?route.query.toFrom:"/index");
    }
    loginErr.value=data.msg;
}



</script>

<style scoped>
.submit{
    color:red;
    font-size: 12px;
    margin-right: 10px;
    text-decoration: none;
}
.zhuce {
    width: 293px;
}

.margin-top {
    padding: 70px 0px;
    background-color: #17073d;
}

.padding {
    padding: 20px;
}
</style>